<template>
  <div class="app-container">
    <!-- 添加照片对话框 -->
    <el-dialog @close="close" :close-on-click-modal="false" :title="titlephoto" :visible.sync="openphoto" width="60%"
      append-to-body>
      <el-row>
        <el-col style="margin-bottom:10px">
          班级：
          <el-select v-model="classId" placeholder="请选择" clearable size="small" @change="chooseClassid">
            <el-option v-for="item in classList" :key="item.id" :label="item.label" :value="item.id" size="small">
            </el-option>
          </el-select>

        </el-col>
      </el-row>
      <el-row class="fleximg" v-if="classId != null">
        <el-col :span="13">
          <el-carousel indicator-position="outside" :autoplay="false" arrow="always">
            <el-carousel-item v-for="(item, index) in classPhotolist" :key="index">
              <div class="radiostyle"><el-radio v-model="radiovalue" @change="checkImg(item)" :label="item.imgUrl">第{{
                index + 1 }}张</el-radio></div>
              <el-image :src="item.imgUrl" class="imgshow" @click="checkImg(item)"></el-image>
            </el-carousel-item>
          </el-carousel>
          <pagination v-show="clastotal > 0" :total="clastotal" :page.sync="queryParamsclass.pageNum"
            :limit.sync="queryParamsclass.pageSize" @pagination="getClassList" />
        </el-col>
        <el-col :span="11">
          <el-table ref="multipleTable" v-loading="loading" :data="studentList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="姓名" align="center" prop="name" />
            <el-table-column label="学号" align="center" prop="code" />
          </el-table>
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormPhoto">确 定</el-button>
        <el-button @click="cancelPhoto">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addStudenPhoto, listgrowphoto, updatesphotoList } from '@/api/base/grow'
import { selectClazz } from '@/api/base/clazz'
import { listPhotogl } from '@/api/base/gardensystem'

export default {
  name: "phonegl",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,

      // 学生表格数据
      studentList: [],

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      photoList: [],//弹窗照片数据
      total: 0,
      totalPhoto: 0,
      titlephoto: '分配照片',
      openphoto: false,
      classList: [],//班级
      queryParamsphoto: {
        pageNum: 1,
        pageSize: 10,
        stuCode: null,
      },
      classPhotolist: [],//班级圈照片列表
      clastotal: 0,
      queryParamsclass: {
        pageNum: 1,
        pageSize: 10,
      },
      radiovalue: null,
      classId: null,
      createDate: null,

    };
  },
  created() {
    this.getQueryClazzList()
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.stuId);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /**班级切换*/
    chooseClassid(value) {
      this.classId = value
      //调右侧学生
      this.getList();
      //调左侧朋级圈照片
      this.getClassList()
    },
    /**确定选择好的图片**/
    async submitFormPhoto() {
      if (this.classPhotolist.length > 0) {
        // log
        if (!this.radiovalue) {
          this.$message.error('请先选择照片')
        } else if(this.ids.length == 0){
          this.$message.error('请先选择学生')
        } else {
          try {
            let params = {
              stuIdList: this.ids,
              url: this.radiovalue,
              createDate: this.createDate,
            }
            const data = await addStudenPhoto(params)
            if (data.code == 200) {
              this.msgSuccess("新增成功");
              this.openphoto = false;
              this.radiovalue = ''
              this.createDate = ''
              this.ids = []
              this.$refs.multipleTable.clearSelection();
              this.$emit('getList');
            }

          } catch (e) {
            console.log(e)
          }
        }
      } else {
        this.$message.error('没有图片无法进行分配')
      }



    },
    /**点击选择图片*/
    checkImg(e) {
      this.msgSuccess("选择了该图片分配给右侧学生");
      this.radiovalue = e.imgUrl
      this.createDate = e.createDate
    },

    /** 查询学生列表 */
    async getList() {
      try {
        this.loading = true;
        this.queryParams.classId = this.classId
        const data = await listgrowphoto(this.queryParams)
        this.studentList = data.rows;
        this.total = data.total;
        this.loading = false;
      } catch (e) {
        console.log(e)
      }
    },
    /** 查询班级列表 */
    async getQueryClazzList() {
      try {
        this.loading = true;
        const { rows } = await selectClazz();
        this.classList = rows.map(item => {
          return {
            id: item.id,
            label: item.title,
          }
        })
        this.loading = false;
      } catch (e) {
        console.log(e)
      }
    },
    /**调用朋友圈列表照片**/
    async getClassList() {
      try {
        this.classPhotolist = []
        this.queryParamsclass.classId = this.classId
        const data = await listPhotogl(this.queryParamsclass);
        data.rows.map(item => {
          if (item.imgList != '') {
            item.imgList = item.imgList.map(infor => {
              return {
                imgUrl: infor,
                createDate: item.createDate
              }
            })
            this.classPhotolist = this.classPhotolist.concat(item.imgList)
          }
        })
        this.clastotal = data.total
      } catch (e) {
        console.log(e)
      }
    },
    close() {
      this.openphoto = false;
      this.radiovalue = ''
      this.createDate = ''
      this.ids = []
      this.classId = null
      this.$refs.multipleTable.clearSelection();
    },
    // 取消照片按钮
    cancelPhoto() {
      this.openphoto = false;
    },
    //打开照片弹窗
    openPhoto() {
      this.openphoto = true;
    },

    /** 提交按钮 */
    // submitForm() {
    //   this.$refs["form"].validate(valid => {
    //     if (valid) {
    //       if (this.form.id != null) {
    //         updateDevice(this.form).then(response => {
    //           this.msgSuccess("修改成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       } else {
    //         addDevice(this.form).then(response => {
    //           this.msgSuccess("新增成功");
    //           this.open = false;
    //           this.getList();
    //         });
    //       }
    //     }
    //   });
    // },
  }
};
</script>
<style lang="scss" scoped>
.el-dialog .el-image {
  left: 50%;
  transform: translate(-50%, 0);
}

.radiostyle {
  position: absolute;
  z-index: 10;
  right: 10px;
  top: 10px;
}
</style>
